<template>
  <div>
    <headTop></headTop>
    <div style="height: 70px;"></div>

    <div style="position: relative;" >
      <div class="pbanner">
        <div class="banner_tip">
          <div class="ba_t">Contact Us222</div>
          <div class="ba_b">we'd love to hear from you.<br> Please fill out the form below, and we'll get back to you as soon as possible. </div>
        </div>
      </div>
      <!-- <div style="height: 200px;"></div> -->
      <div class="contact-main w"  style="padding-top: 200px;">

        <div class="contact-box new-box">
        <!--  <div class="cb-l" style="padding-left: 20px;">
            <div>
              <img src="../../assets/image/cbl.png" style="width: 405px;" />
              <h4 class="mt-4">Are You Facing Any Problem..?</h4>
              <div class="text-muted mb-4">
                If you have any questions,<br />
                you can contact us through these contact methods
              </div>
              <el-popover placement="top" width="200" trigger="hover">
                <div class="tcode">
                  <div style="width: 180px;margin: 0 auto;">
                    <img src="../../assets/image/code.png" style="width: 100%;" />
                  </div>
                </div>

                <div slot="reference" class="mybtn" style="margin: 0 auto;width: 190px;">
                  Telegram LiveChat
                </div>
              </el-popover>
              <p class="mt-4" style="font-weight: inherit;margin-bottom: 16px;">Or you can contact at</p>
              <div class="oc_list">
                <div class="badge f-14 bg-soft-dark text-muted"><span
                    class="text-dark mr-1">Email:</span>xxxxxxxxxxxxx@gmail.com</div>
                <div class="badge f-14 bg-soft-dark text-muted"><span class="text-dark mr-1">Skype:</span>xxxxxxxx</div>
              </div>
            </div>
          </div> -->

          <div class="cb-r" style="width: 100%;">
            <h4 class="line-height-1_4 mb-4">Get in Touch</h4>
            <div>
              <el-form ref="form" :model="form" label-width="80px" size="small" label-position="top">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="First and Last Name" :rules="[
        { required: true, message: 'Please fill in the complete form', trigger: 'blur' },
      ]">
                      <el-input v-model="form.name" placeholder="name"></el-input>
                    </el-form-item>
                  </el-col>



                  <el-col :span="12">
                    <el-form-item label="Email" prop="email" :rules="[
        { required: true, message: 'Please fill in the complete form', trigger: 'blur' },
      ]">
                      <el-input v-model="form.name" placeholder="Email"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="Contact: Skype">
                      <el-input v-model="form.name" placeholder="Skype"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="Contact: Telegram">
                      <el-input v-model="form.name" placeholder="Telegram"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="24" class="msa">
                    <el-form-item label="What Services do you need?">
                      <el-checkbox-group v-model="form.type">
                        <el-checkbox label="Direct Installs" name="type"></el-checkbox>
                        <el-checkbox label="Keyword Installs" name="type"></el-checkbox>
                        <el-checkbox label="Guarantee Keyword Ranking" name="type"></el-checkbox>
                        <el-checkbox label="Guarantee App Ranking" name="type"></el-checkbox>
                        <el-checkbox label="Ratings and Reviews" name="type"></el-checkbox>
                        <el-checkbox label="Keyword Basic Optimization" name="type"></el-checkbox>
                        <el-checkbox label="Apple Search Ads Services" name="type"></el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>
                  </el-col>


                  <el-col :span="24" class="maras">
                    <el-form-item label="Let us know more about your specific needs" :rules="[
        { required: true, message: 'Please fill in the complete form', trigger: 'blur' },
      ]">
                      <el-input type="textarea" v-model="form.desc"
                        placeholder="Please simply describe your question within 1500 characters"></el-input>
                    </el-form-item>
                  </el-col>


                </el-row>




                <!--   <el-form-item label="活动性质">
                            <el-checkbox-group v-model="form.type">
                              <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                              <el-checkbox label="地推活动" name="type"></el-checkbox>
                              <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                              <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                            </el-checkbox-group>
                          </el-form-item>

                          <el-form-item label="活动形式">
                            <el-input type="textarea" v-model="form.desc"></el-input>
                          </el-form-item> -->
                <el-form-item>
                  <div class="mybtn" style="line-height: 1.4;width: 160px;margin: 0 auto;">
                    Send Message
                  </div>

                </el-form-item>
              </el-form>

            </div>

          </div>




        </div>

      </div>

    </div>






    <!-- <div style="height: 120px;"></div> -->

    <footerBottom></footerBottom>



  </div>



</template>

<script>
  import headTop from '../common/head.vue';
  import footerBottom from '../common/footer.vue';


  export default {
    name: 'Price',
    components: {
      footerBottom,
      headTop
    },
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    }



  }
</script>

<style>
</style>
